<template>
	<div id="user_detail" class="table" v-show="formVisible">
		<div class="container">
			<div style="text-align:center;">
				<div style="text-align:left;margin:0 auto;">
					<el-form :model="modelData" label-width="120px">
						<div style="text-align:left;margin:0 auto;">
							<el-form-item label="用户头像：">
								<el-upload class="avatar-uploader" :show-file-list="false" width="100" :action="globaldata.uploadUrl" :on-success="handleAvatarSuccess">
									<img v-if="modelData.icon" :src="globaldata.imgBaseUrl+modelData.icon" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<div class="headimg">温馨提示：建议尺寸80*80</div>
							</el-form-item>
							<template>
								<el-form-item class="text_align" label="用户账号：" v-if="modelData.id>0" prop="userCount" :disabled="true">
									<el-input v-model="modelData.userCount" :maxlength="30" disabled></el-input>
								</el-form-item>
								<el-form-item class="text_align" label="用户账号：" v-else prop="userCount">
									<el-input v-model="modelData.userCount" :maxlength="30" placeholder="请输入账号"></el-input>
								</el-form-item>
							</template>
							<el-form-item class="text_align" label="用户名称：" prop="userName">
								<el-input v-model="modelData.userName" :maxlength="20" placeholder="请输入用户名称"></el-input>
							</el-form-item>
							<el-form-item class="text_align" label="电话：">
								<el-input v-model="modelData.phone" :maxlength="11" placeholder="请输入电话"></el-input>
							</el-form-item>
							<!--<el-form-item class="text_align" label="用户状态：">
								<el-radio v-model="modelData.userStatus" :label='1'>启用</el-radio>
								<el-radio v-model="modelData.userStatus" :label='0'>禁用</el-radio>
							</el-form-item>-->
							<el-form-item class="role_area" label="角色：" v-if="modelData.userType=='user_admin'">
								<el-checkbox-group v-model="selectedroles" size="mini">
									<el-checkbox v-for="role in roleList" :key="role.id" :label="role.id">{{role.roleName}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
							<el-form-item label="咨询标签：" v-else>
									<el-select v-model="modelData.askTag" placeholder="请选择">
									<el-option v-for="(value,key) in careerTags" :key="key" :label="value" :value="key"></el-option>
								   </el-select>								  
							</el-form-item>
						</div>
					</el-form>
				</div>
			</div>
			<div style="clear:both;"></div>
			<div slot="footer" class="dialog-footer my_flex_right">
				<el-button @click="close()">返回</el-button>
				<el-button type="primary" @click="save()">保存</el-button>
			</div>
		</div>
		<!--图片预览-->
		<div class="imgPreview my_flex_center" v-if="dialogImageUrl">
			<div>
				<img :src="dialogImageUrl" />
			</div>
		</div>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>

	</div>
</template>

<script>
	import service from '../../../../js/common/userservice.js'
	export default {
		props: {
			parentDetailData: {},
			id: null
		},
		data() {
			return {
				cardicon: require('../../../../assets/cardicon.png'), //默认图片
				roleList: [],
				selectedroles: [],
				modelData: {},
				formVisible: this.visible,
				dialogImageUrl: '',
				careerTags:[],
				dialogVisible: false
			}
		},
		watch: {
			formVisible(newVal, oldVal) {
				if(newVal) { //详情页弹出
					let self = this;
					let param_arr = ['career_tag'];
					this.tool.getDirByKey(this, param_arr).then(() => {
						self.careerTags = self.$store.state.career_tag;
					});
					this.resetData();
					service.getModelData(this, this.id);
				}
			}
		},
		mounted() {
			service.getRole(this);

		},
		methods: {
			resetData() {
				this.selectedroles = [];debugger;
				this.modelData = {
					createBy: '',
					createTime: '',
					id: '',
					phone: '',
					icon: '',
					userName: '',
					userCount: '',
					userName: '',
					updateTime: '',
					userStatus: '',
					userType:this.$route.query.type,
					askTag:''
				}
			},
			show() {
				this.formVisible = true;
			},
			save() {
				service.handleSave(this);
			},
			close() {
				this.parentDetailData.isTabelShow = true;
				this.formVisible = false;
			},
			handleAvatarSuccess(res, file) {
				let data = res.data;
				if(res.code == 1) {
					this.modelData.icon = data.id;
				} else {
					this.$message({
						message: res.msg,
						type: 'error'
					})
				}
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			}

		},

	}
</script>
<style lang="less">
	#user_detail {
		.cardIcon {
			width: 100px;
			height: 100px;
		}
		.el-checkbox-group {
			display: flex;
			flex-wrap: wrap;
			border: 1px dashed #c6d0d2;
			padding: 10px;
			border-radius: 10px;
			.el-checkbox__label {
				margin-right: 30px;
			}
			.el-checkbox+.el-checkbox {
				margin-left: 0;
				margin-right: 30px;
			}
		}
		.headimg{
			color: red;
		}
	}
</style>